<template>
  <div class="IntegralRule_container">
    <div class="nav">
      <Breadcrumb separator=">">
        <Breadcrumb-item href="#">忠诚度管理</Breadcrumb-item>
        <Breadcrumb-item href="#">积分获取规则</Breadcrumb-item>
      </Breadcrumb>
    </div>
    <div style="marign-top:3vh;">
      <Tabs value="name1">
        <!-- 基础积分获取规则 -->
        <TabPane label="基础积分获取规则" name="name1">
          <Form
            ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="90"
            label-position="left"
          >
            <div>
              <h3 class="title">基础积分获取</h3>
              <FormItem label="积分换算比例:" prop="amount" :label-width="100" style="float: left;margin-top:2vh;padding-left:6vw;">
                <Input v-model="formValidate.amount" style="width:80px;" clearable></Input>
                <span>元</span>
                <span>获得</span>
              </FormItem>
              <FormItem prop="points" style="float: left; margin-left: -70px; margin-top:2vh;">
                <Input v-model="formValidate.points" style="width:80px;" clearable></Input>
                <span>积分</span>
              </FormItem>
              <FormItem label="开始时间:" prop="beginDate" :label-width="100" style="margin-top:9vh;padding-left:6vw;">
                <DatePicker
                  type="datetime"
                  v-model="formValidate.beginDate"
                  format="yyyy-MM-dd"
                  placeholder="请选择日期"
                  style="width: 200px"
                  @on-change="formValidate.beginDate=$event"
                ></DatePicker>
              </FormItem>
              <Row style="margin-top:2vh;">
                <Col>
                  <Row>
                    <Col>
                      <FormItem prop="firstTransPointsRadio">
                        <CheckboxGroup v-model="formValidate.supportFirstTransBonusPointsArray" style="float:left;">
                          <Checkbox label="1">首次购买额外赠送</Checkbox>
                        </CheckboxGroup>
                        <Input v-model="formValidate.firstTransPointsRadio" style="width:80px;" clearable></Input>
                        <span>倍积分</span>
                      </FormItem>
                    </Col>
                  </Row>
                  <Row style="margin-top:2vh;">
                    <Col>
                      <FormItem>
                        <CheckboxGroup v-model="formValidate.supportBirthdayBonusPointsArray">
                          <Checkbox label="1">生日月首笔购买额外赠送
                            <Input v-model="formValidate.birthdayPointsRadio" style="width:80px;" clearable></Input>
                            <span>倍积分</span>
                          </Checkbox>
                        </CheckboxGroup>
                      </FormItem>
                    </Col>
                  </Row>
                </Col>
              </Row>
            </div>

            <div style="margin-top: 3vh">
              <h3 class="title">积分限制</h3>
              <FormItem label prop="maxPointsRadio" :label-width="95">
                <Row style="margin:2vh 0px 0px 0px;">
                  <Col>
                    <CheckboxGroup v-model="formValidate.needLimitMaxPointsArray">
                      <Checkbox label="1">限制交易最大积分倍数
                        <Input v-model="formValidate.maxPointsRadio" style="width:80px;" clearable></Input>
                        <span>倍积分</span>
                      </Checkbox>
                    </CheckboxGroup>
                  </Col>
                </Row>
              </FormItem>
            </div>

            <div style="margin-top:3vh;">
              <h3 class="title">等级积分奖励</h3>
              <FormItem label="是否支持不同等级的每笔交易额外积分奖励:" :label-width="250" style="margin-top:1vh;padding-left:6vw;">
                <i-switch v-model="formValidate.supportLevelBonusPointsBoolean" size="large">
                  <span slot="open">开</span>
                  <span slot="close">关</span>
                </i-switch>
              </FormItem>
              <FormItem label prop="numbers" :label-width="100" style="margin-top:2vh;">
                <div>
                  <CheckboxGroup v-model="formValidate.checkboxGroupArray">
                    <Row v-for="(item,index) in formValidate.levelPointsRadioArray" :key="index" style="margin-top:2vh;">
                      <Col>
                        <Checkbox :label="item.level_id">
                          {{item.level_name}} &nbsp;
                          <span>额外获取</span>
                          <Input v-model="item.points_radio" style="width:80px;" clearable></Input>
                          <span>倍积分</span>
                        </Checkbox>
                      </Col>
                    </Row>
                  </CheckboxGroup>
                </div>
              </FormItem>
            </div>
            <div style="margin-top:3vh;">
              <h3 class="title">积分取整规则</h3>
              <FormItem
                label="积分取整规则:"
                prop="consumenum"
                :label-width="100"
                style="margin-top:3vh;padding-left:6vw;"
              >
                <Select
                  v-model="formValidate.pointsRoundType"
                  placeholder="请选择积分取整规则"
                  style="width:200px"
                  clearable
                >
                  <Option
                    v-for="item in integrallist"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></Option>
                </Select>
              </FormItem>
            </div>

            <div style="margin-top:3vh;">
              <h3 class="title">黑名单</h3>
              <FormItem label prop="blacklist" :label-width="100" style="margin-top:2vh;">
                <CheckboxGroup v-model="formValidate.blacklist">
                  <Checkbox label="1">黑名单用户享受基础积分规则</Checkbox>
                </CheckboxGroup>
              </FormItem>
            </div>

            <div style="margin-top:5vh;">
              <h3 class="title">启用状态</h3>
              <FormItem label prop="status" :label-width="100" style="margin-top:2vh;">
                <RadioGroup v-model="formValidate.status">
                  <Radio label="2">启用</Radio>
                  <Radio label="1">停用</Radio>
                </RadioGroup>
              </FormItem>
            </div>

            <Row type="flex" justify="center" style="margin-top:2vh;">
              <Col>
                <FormItem>
                  <Button style="margin-left: 8px" @click.prevent="returnTable()">返回</Button>
                  <Button type="primary" @click="saveBasic('formValidate')">保存</Button>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </TabPane>
        <!-- 促销积分获取规则 -->
        <TabPane label="促销积分获取规则" name="name2">
          <Row>
            <Col span="10">
              <Input v-model="formItem.rulename" placeholder="请输入规则编号/名称" style="width:200px;" clearable></Input>
              <Button type="primary" @click="getruleTransList">搜索</Button>
            </Col>
            <Col span="3" push="11">
              <Button type="primary" @click="openModal()">创建促销积分规则</Button>
            </Col>
          </Row>
          <Row style="margin-top:2vh;">
            <Col>
              <Table :loading="TableLoading" border :columns="ruleTransColumn" :data="ruleTransList"></Table>
            </Col>
          </Row>

          <Row type="flex" justify="center" style="margin-top:2vh;">
            <Col>
              <Page :id="pageId" show-total :total="totalsale" :page-size="pageSizesale" @on-page-size-change="ruleTranschangePageSize" @on-change="pageable" show-sizer show-elevator></Page>
            </Col>
            <Col push="1">
              <Button style="margin-top: 6px;" type="primary" @click="goElevatorPage(pageId)">跳转</Button>
            </Col>
          </Row>

          <Modal v-model="addMal" title="新建" width="780" draggable :rules="modalruleValidate">
            <Form :model="formItem" :label-width="80" ref="formItem" label-position="left">
              <FormItem label="规则编号:" :label-width="90" style="margin-top:2vh;" required>
                <Input v-model="formItem.code" placeholder="请输入规则编号" :maxlength="10" clearable></Input>
              </FormItem>
              <FormItem label="规则名称：" :label-width="90" style="margin-top:3vh;" required>
                <Input v-model="formItem.name" type="text" width="200" placeholder="请输入规则名称" :maxlength="10" clearable></Input>
              </FormItem>
              <FormItem label="开始时间：" prop="beginDate" :label-width="90" style="margin-top:3vh;" required>
                <DatePicker type="datetime" placeholder="选择发送时间" v-model="formItem.beginDate" format="yyyy-MM-dd" @on-change="formItem.beginDate=$event" style="width:100%;" clearable></DatePicker>
              </FormItem>
              <FormItem label="结束时间：" :label-width="90" style="margin-top:3vh;" required> 
                <DatePicker type="datetime" placeholder="选择发送时间" v-model="formItem.endDate" format="yyyy-MM-dd" @on-change="formItem.endDate=$event" style="width:100%;" clearable></DatePicker>
              </FormItem>
              <FormItem label="交易渠道：" :label-width="90" style="margin-top:3vh;" required>
                <RadioGroup v-model="formItem.needLimitChannel" vertical>
                  <span @click="hideChannel()"><Radio label="0">全部渠道</Radio></span>
                  <span @click="showChannel()"><Radio label="1">指定渠道</Radio></span>    
                    <CheckboxGroup v-model="formItem.channelIds" v-if="flag==true" style="margin-left:1vw;"  @on-change="splitchannel">
                      <Checkbox v-for="(item,index) in channel_id" :key="index" :value="item.id" :label="item.id">{{item.name}}</Checkbox>
                    </CheckboxGroup> 
                </RadioGroup>
              </FormItem>
              <FormItem label="会员限制：" prop="needLimitLevel" :label-width="90" style="margin-top:2vh;" required>
                <RadioGroup v-model="formItem.needLimitLevel" vertical>
                  <span @click="hideLevel()"><Radio label="0">全部会员</Radio></span>
                  <span @click="showLevel()"><Radio label="1">指定等级</Radio></span>
                    <CheckboxGroup style="margin-left:1vw;" v-model="formItem.levelIds" v-if="levelflag==true" @on-change="splitmember">
                      <Checkbox v-for="(item,index) in levelRulelist" :key="index" :label="item.id" :value="item.levelId">{{item.levelName}}</Checkbox>
                    </CheckboxGroup>
                </RadioGroup>
              </FormItem>
              <FormItem label="商品限制：" prop="needLimitProduct" :label-width="90" style="margin-top:2vh;" required>
                <RadioGroup v-model="formItem.needLimitProduct" vertical>
                  <span @click="hideGood()">
                    <Radio label="0"><span>全部商品</span></Radio>
                  </span>
                  <span @click="showGood()">
                    <Radio label="1">
                      <span>指定商品</span>
                      <Button type="primary" @click="showModel" v-if="goodflag==true">选择商品</Button>
                      <span style="color:lightgray;" v-if="goodflag==true">(当前已选择<strong style="font-size:1.1rem;color:lightskyblue;">{{productList.length}}</strong>件商品)</span>
                    </Radio>
                  </span>
                </RadioGroup>
              </FormItem>
              <FormItem prop="productId" v-if="goodflag==true" required>
                <Row style="margin-top:4vh;" v-model="formItem.productList">
                  <Col>
                    <Table height="150" border :columns="columns8" :data="productList"></Table>
                  </Col>
                </Row>
              </FormItem>
              <FormItem label="赠送积分：" :label-width="90" style="margin-top:2vh;" prop="pointsRewardType" required>
                <RadioGroup v-model="formItem.pointsRewardType" vertical>
                  <Radio label="0">
                    <span>按倍数</span>
                    <span>额外赠送</span>
                    <Input v-model="formItem.pointsRadio" type="text" style="width:50px;" :maxlength="10" clearable></Input>
                    <span>倍积分</span>
                  </Radio>
                  <Radio label="1" style="margin-top:2vh;">
                    <span>按积分</span>
                    <span>额外赠送</span>
                    <Input v-model="formItem.points" type="text" style="width:50px;" :maxlength="10" clearable></Input>
                    <span>积分</span>
                  </Radio>
                </RadioGroup>
              </FormItem>
              <FormItem label="启用状态：" :label-width="90" style="margin-top:2vh;" prop="status" required>
                <RadioGroup v-model="formItem.status">
                  <Radio label="1">
                    <span>启用</span>
                  </Radio>
                  <Radio label="0">
                    <span>停用</span>
                  </Radio>
                </RadioGroup>
              </FormItem>
            </Form>
            <div slot="footer">
              <Button type="text" size="large" @click="addMal=false">取消</Button>
              <Button type="primary" size="large" @click="Addgrade('formItem')">确定</Button>
            </div>
          </Modal>

          <Modal v-model="modal4" title="编辑" width="800">
            <Form :model="editrulelist" :label-width="90" ref="editrulelist" label-position="left">
              <FormItem label="规则编号:" :label-width="90" style="margin-top:2vh;" required>
                <Input v-model="editrulelist.code" placeholder="请输入规则编号" :maxlength="10" clearable></Input>
              </FormItem>
              <FormItem label="规则名称：" :label-width="90" style="margin-top:3vh;" required>
                <Input v-model="editrulelist.name" type="text" width="200" placeholder="请输入规则名称" :maxlength="10" clearable></Input>
              </FormItem>
              <FormItem label="开始时间：" prop="beginDate" :label-width="90" style="margin-top:3vh;" required>
                <DatePicker type="datetime" placeholder="选择发送时间" v-model="editrulelist.beginDate" format="yyyy-MM-dd" @on-change="editrulelist.beginDate=$event" style="width:100%;" clearable></DatePicker>
              </FormItem>
              <FormItem label="结束时间：" :label-width="90" style="margin-top:3vh;" required> 
                <DatePicker type="datetime" placeholder="选择发送时间" v-model="editrulelist.endDate" format="yyyy-MM-dd" @on-change="editrulelist.endDate=$event" style="width:100%;" clearable></DatePicker>
              </FormItem>
              <FormItem label="交易渠道：" :label-width="90" style="margin-top:3vh;" required>
                <RadioGroup v-model="editrulelist.needLimitChannel" vertical>
                  <span @click="hideeditChannel()"><Radio :label="0">全部渠道</Radio></span>
                  <span @click="showeditflag()"><Radio :label="1">指定渠道</Radio></span>    
                    <CheckboxGroup v-model="editrulelist.channelIds" v-if="editflag==1" style="margin-left:1vw;"  @on-change="splitchannel">
                      <Checkbox v-for="(item,index) in channel_id" :key="index" :label="item.id.toString()">{{item.name}}</Checkbox>
                    </CheckboxGroup> 
                </RadioGroup>
              </FormItem>
              <FormItem label="会员限制：" prop="needLimitLevel" :label-width="90" style="margin-top:2vh;" required>
                <RadioGroup v-model="editrulelist.needLimitLevel" vertical>
                  <span @click="hideeditLevel()"><Radio :label="0">全部会员</Radio></span>
                  <span @click="showeditLevel()"><Radio :label="1">指定等级</Radio></span>
                    <CheckboxGroup style="margin-left:1vw;" v-model="editrulelist.levelIds" v-if="editlevelflag==1" @on-change="splitmember">
                      <Checkbox v-for="(item,index) in levelRulelist" :key="index" :label="item.id.toString()">{{item.levelName}}</Checkbox>
                    </CheckboxGroup>
                </RadioGroup>
              </FormItem>
              <FormItem label="商品限制：" prop="needLimitProduct" :label-width="90" style="margin-top:2vh;" required>
                <RadioGroup v-model="editrulelist.needLimitProduct" vertical>
                  <span @click="hideeditGood()">
                    <Radio :label="0"><span>全部商品</span></Radio>
                  </span>
                  <span @click="showeditGood()">
                    <Radio :label="1">
                      <span>指定商品</span>
                      <Button type="primary" @click="showModel" v-if="editgoodflag=='1'">选择商品</Button>
                      <span style="color:lightgray;" v-if="editgoodflag=='1'">(当前已选择<strong style="font-size:1.1rem; color:lightskyblue;">{{productList.length}}</strong>件商品)</span>
                    </Radio>
                  </span>
                  <Row style="margin-top:4vh;" v-model="editrulelist.productList" v-if="editgoodflag=='1'">
                  <Col>
                    <Table height="150" border :columns="columns8" :data="productList" ></Table>
                  </Col>
                </Row>
                </RadioGroup>
              </FormItem>
              <FormItem label="赠送积分：" :label-width="90" style="margin-top:10vh;" prop="pointsRewardType" required>
                <RadioGroup v-model="editrulelist.pointsRewardType" vertical>
                  <Radio :label="0">
                    <span>按倍数</span>
                    <span>额外赠送</span>
                    <Input v-model="editrulelist.pointsRadio" type="text" style="width:50px;" :maxlength="10" clearable></Input>
                    <span>倍积分</span>
                  </Radio>
                  <Radio :label="1" style="margin-top:2vh;">
                    <span>按积分</span>
                    <span>额外赠送</span>
                    <Input v-model="editrulelist.points" type="text" style="width:50px;" :maxlength="10" clearable></Input>
                    <span>积分</span>
                  </Radio>
                </RadioGroup>
              </FormItem>
              <FormItem label="启用状态：" :label-width="90" style="margin-top:2vh;" prop="status" required>
                <RadioGroup v-model="editrulelist.status">
                  <Radio :label="1">
                    <span>启用</span>
                  </Radio>
                  <Radio :label="0">
                    <span>停用</span>
                  </Radio>
                </RadioGroup>
              </FormItem>
            </Form>
            <div slot="footer">
              <Button type="text" size="large" @click="modal4=false">取消</Button>
              <Button type="primary" size="large" @click="EditIntegral('editrulelist')">确定</Button>
            </div>
          </Modal>

          <!-- 选择商品 -->
          <Modal v-model="modal2" width="900" title="选择商品" draggable>
            <Row>
              <Col>
                <Input v-model="codeOrName" placeholder="请输入商品编码或标题" style="width:200px;" clearable  @on-enter="querylist"></Input>
                <Button type="primary" @click="querylist">搜索</Button>
              </Col>
            </Row>
            <Row style="margin-top:3vh;">
              <Col>
                <Table :loading="TableLoading" border ref="selection" @on-select="chooseInfo" :columns="chooseproduct" @on-selection-change="chooseInforeduce" :data="productData"></Table>
              </Col>
            </Row>
            <Row type="flex" justify="center" style="margin-top:2vh;">
              <Col>
                <Page :id="productpage" show-total :total="totalpro" @on-page-size-change="pagechangeSize" @on-change="pageSizeproduct" show-sizer show-elevator></Page>
              </Col>
              <Col push="1">
                <Button style="margin-top: 6px;" type="primary" @click="goElevatorPage(productpage)">跳转</Button>
              </Col>
            </Row>
          </Modal>

          <Modal v-model="modal3" title="提示信息" @on-ok="remove">
            <h3>确定删除该积分规则？</h3>
          </Modal>
        </TabPane>

        <TabPane label="互动积分获取规则" name="name3">
          <Table :loading="TableLoading" border :columns="columns1" :data="pointsRuleBehaviourList"></Table>
          <Row type="flex" justify="center" align="middle" style="margin-top:2vh;">
            <Col>
              <Page :id="interact" show-total :total="total2" :page-size="pageSize2" @on-change="pageable2" @on-page-size-change="changegroupPageSize2" show-sizer show-elevator></Page>
            </Col>
            <Col push="1">
              <Button style="margin-top: 1vh;" type="primary" @click="goElevatorPage(interact)">跳转</Button>
            </Col>
          </Row>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>
<script>
import {pointsRuleBasic,savebasicrule,fetchsalesrule,editgrade,fetchproductlist,getRuleTrans,fetchChannelList,fetchLeveltList,fetchintegralStatus,
  fetchintegralDel,fetchintegral,behaviourTypePage,addIntegralrule} from "@/api/Integral";
import { fetchProductList, } from "@/api/order";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  name: "Integralrule",
  data() {
    const validatepriceNumber = (rule, value, callback) => {
      if (value % 1 != 0) {
        callback(new Error("请输入整数"));
      } else {
        callback();
      }
    };
    const validateNumber = (rule, value, callback) => {
      if (value % 10 != 0) {
        callback(new Error("长度不能大于10"));
      } else {
        callback();
      }
    };
    const validatetimes = (rule, value, callback) => {
      var num = new Number(value);
      if (num.toFixed(1) != num) {
        callback(new Error("倍数小数位不能超过一位"));
      } else {
        callback();
      }
    };
    const validateintegral = (rule, value, callback) => {
      var num = new Number(value);
      if (num.toFixed(2) != num) {
        callback(new Error("倍数小数位不能超过两位"));
      } else {
        callback();
      }
    };
    return {
      flag: false,
      levelflag: false,
      goodflag: false,
      
      /** 编辑促销积分规则 */
      editflag:'0',
      editlevelflag:'0',
      editgoodflag:'0',

      channel_id: [],
      codeOrName:'',
      interact: "interactID",
      /** 基础积分获取规则 */
      formValidate: {
        amount: "",
        points: "",
        integral: "",
        beginDate: "",
        supportFirstTransBonusPoints: "", //是否支持首笔交易奖励 1-是 0-否;
        firstTransPointsRadio: "",
        supportBirthdayBonusPoints: "", //是否支持会员生日月首笔交易奖励 1-是 0-否
        birthdayPointsRadio: "",
        supportLevelBonusPoints: "", //是否支持不同等级的每笔交易额外积分奖励 1-是 0-否
        maxPointsRadio: "",
        needLimitMaxPoints: "", //是否限制交易最大积分倍数(基本积分设置)
        pointsRoundType: "3",
        blacklist: ["1"],
        status: 1,
        levelPointsRadioArray: [],
        supportLevelBonusPointsBoolean: false,
        CheckboxGroupArray: [],
        supportFirstTransBonusPointsArray: [],
        supportBirthdayBonusPointsArray: []
      },
      integrallist: [
        {
          label: "四舍五入取整",
          value: "1"
        },
        {
          label: "向上取整",
          value: "2"
        },
        {
          label: "向下取整",
          value: "3"
        }
      ],
      ruleValidate: {
        amount: [
          { required: true, message: "金额不能为空", trigger: "blur" },
          {
            message: "输入整数类型",
            trigger: "blur",
            validator: validatepriceNumber
          }
        ],
        points: [
          { required: true, message: "积分不能为空", trigger: "blur" },
          {
            type: "number",
            message: "输入整数类型",
            trigger: "blur",
            validator: validatepriceNumber
          }
        ],
        firstTransPointsRadio: [
          { required: true, message: "倍数不能为空", trigger: "blur" },
          {
            type: "number",
            message: "倍数小数位不能超过一位",
            trigger: "blur",
            validator: validatetimes
          }
        ],
        birthdayPointsRadio: [
          { required: true, message: "倍数不能为空", trigger: "blur" },
          { type: "number",message: "倍数小数位不能超过一位",xtrigger: "blur",validator: validatetimes}
        ],
        maxPointsRadio: [
          { required: true, message: "倍数不能为空", trigger: "blur" },
          { type: "number", message: "倍数小数位不能超过一位",trigger: "blur",validator: validatetimes}
        ]
      },
      disabled1: true,
      disabled2: true,
      disabled3: true,
      disabled4: true,

      /** 互动分页列表 **/
      pageId2: "targetPage",
      total2: 0,
      pageNum2: 1, //开始条数
      pageSize2: 10, //每页记录数

      /** 促销积分获取规则  */
      productpage: "target",
      totalsale: 0,
      pageNumsale: 1, //开始条数
      pageSizesale: 10, //每页记录数
      ruleTransList: [],
      editrulelist:{  // 修改促销积分规则
        id:'',
        code: "",
        name: "",
        beginDate: "",
        endDate: "",
        needLimitChannel:'0', 
        channelIds: [],
        needLimitLevel:'0',
        levelIds:[],
        needLimitProduct: '0',
        productList:[],
        pointsRewardType: '0',
        points:'',
        pointsRadio:'',
        status: "0"
      },

      listData: [],
      TableLoading: false,
      addMal: false,
      modal2: false,
      modal3: false,
      modal4: false,
      levelList: [],
      formItem: { //新增促销积分规则相关参数
        id:'',
        code: "",
        name: "",
        beginDate: "",
        endDate: "",
        needLimitChannel:'0', 
        channelIds: [],
        needLimitLevel:'0',
        levelIds:[],
        needLimitProduct: '0',
        productList:[],
        products:[],
        pointsRewardType: '0',
        points:'',
        pointsRadio:'',
        status: "0"
      },
      modalruleValidate: {
        points: [
          { required: true, message: "规则编码不能为空", trigger: "blur" },
          { type: "number", trigger: "blur", validator: validatepriceNumber }
        ],
        rulename: [
          { required: true, message: "规则名称不能为空", trigger: "blur" },
          {
            type: "string",
            message: "规则名称不能超过10位",
            max: 10,
            trigger: "blur",
            validator: validatepriceNumber
          }
        ],
        times: [{ required: true, message: "请选择时间", trigger: "blur" }],
        endtime: [{ required: true, message: "请选择时间", trigger: "blur" }],
        channel: [
          { required: true, message: "请选择交易渠道", trigger: "blur" }
        ],
        member: [{ required: true, message: "请选择会员", trigger: "blur" }],
        grade: [
          { required: true, message: "请选择等级", trigger: "blur" },
          {
            type: "number",
            message: "倍数小数位不能超过一位",
            trigger: "blur",
            validator: validatetimes
          }
        ],
        product: [{ required: true, message: "请选择商品", trigger: "blur" }],
        rewardintegral: [
          { required: true, message: "请选择赠送积分类型", trigger: "blur" },
          { type: "number",message: "赠送积分小数位不能超过一位",trigger: "blur",validator: validateintegral}
        ],
      },

      //  促销积分表格
      ruleTransColumn: [
        {
          title: "规则编号",
          key: "code",
          align: "center"
        },
        {
          title: "规则名称",
          key: "name",
          align: "center"
        },
        {
          title: "开始时间",
          key: "beginDate",
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              this.changeDate(this.ruleTransList[params.index].beginDate)
            );
          }
        },
        {
          title: "结束时间",
          key: "endDate",
          align: "center",
          render: (h, params) => {
            return h( "div",
              this.changeDate(this.ruleTransList[params.index].endDate)
            );
          }
        },
        {
          title: "渠道",
          key: "channelNames",
          align: "center",
          width: 100,
          tooltip: "true",
        },
        {
          title: "等级",
          key: "levelNames",
          align: "center",
          width: 100,
          tooltip: "true"
        },
        {
          title: "商品",
          key: "productNames",
          align: "center",
          tooltip: "true",
        },
        {
          title: "奖励积分",
          key: "points",
          align: "center",
          width: 100
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          width: 150,
          render: (h, params) => {
            const type = params.row.status === 1 ? "success" : "error";
            let text = "";
            let color = "";
            if (params.row.status == 0) {
              text = "已停用";
              color = "red";
            } else if (params.row.status == 1) {
              text = "已启用";
              color = "lightgreen";
            }
            const row = params.row;
            return h("Tag",
              {
                props: {
                  type: "dot",
                  color: color
                }
              },text
            );
          }
        },
        {
          title: "操作",
          key: "action",
          width: 180,
          align: "center",
          render: (h, params) => {
            var status = params.row.status;
            if (status == 1)
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.editruleOpen(params.index);
                      }
                    }
                  },"修改"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "info",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.changeStatus(params.row, 0);
                      }
                    }
                  },
                  "停用"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.remove(params.row);
                      }
                    }
                  },
                  "删除"
                )
              ]);
            if (status == 0) 
            return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.editruleOpen(params.index);
                      }
                    }
                  },
                  "修改"
                ),
                h("Button",
                {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.changeStatus(params.row, 1);
                      }
                    }
                  },
                  "启用"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.remove(params.row);
                      }
                    }
                  },
                  "删除"
                )
              ]);
          }
        }
      ],

      /** 促销积分获取规则商品列表 */
      columns8: [
        // 选择商品列表
        {
          title: "商品ID",
          key: "id",
          align: "center",
          width: 150,
        },
        {
          title: "商品编码",
          key: "code",
          align: "center",
          width: 150,
        },
        {
          title: "商品标题",
          key: "name",
          align: "center",
          tooltip: "true",
          width: 200,
        },
        {
          title: "操作",
          key: "action",
          width: 140,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.addremove(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      // 选择商品
      chooseproduct: [
        // 选择商品列表
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "商品ID",
          key: "id",
          align: "center"
        },
        {
          title: "商品编码",
          key: "code",
          align: "center"
        },
        {
          title: "商品标题",
          key: "name",
          align: "center",
          tooltip: "true"
        }
      ],
      Addproduct:[
        {
          title: "商品ID",
          key: "id",
          align: "center"
        },
        {
          title: "商品编码",
          key: "code",
          align: "center"
        },
        {
          title: "商品标题",
          key: "name",
          align: "center",
          tooltip: "true"
        },
        {
          title: "操作",
          key: "action",
          width: 140,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.addremove(params.index)
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],


      /** 促销积分选择商品Modal */
      pageNumpro:1,
      pageSizepro:10,
      totalpro:0,
      productData: [],
      productNum:'',
      productId:'productId',  //跳转分页ID
      productList:[], // 获取选择的商品

      /** 互动积分获取规则 */
      pointsRuleBehaviourList: [],
      pageId: "targetPage",
      interactNum: 1,
      interactlimit: 10,
      interacttotal: 0,
      columns1: [
        // 互动积分获取规则类型列表
        {
          title: "编号",
          key: "code",
          align: "center"
        },
        {
          title: "互动类型",
          key: "name",
          align: "center"
        },
        {
          title: "所属类型",
          key: "parent_name",
          align: "center",
          tooltip: "true"
        },
        {
          title: "创建时间",
          key: "create_date",
          align: "center",
          render: (h, params) => {
            return h("div",this.changeDate(this.pointsRuleBehaviourList[params.index].createtime)
            );
          }
        },
        {
          title: "操作",
          key: "action",
          width: 140,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.skip(params.row.id);
                    }
                  }
                },
                "设置规则"
              )
            ]);
          }
        }
      ],
    };
  },
  methods: {
    ...mapMutations(["FETCH_LEVEL_RUlE"]),
    ...mapActions(["fetchlevelRuleList"]),
    FetchlevelRuleList() {
      this.$store.dispatch("fetchlevelRuleList");
    },
    saveBasic(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          var reqParams = this.formValidate;
          reqParams.beginDateStr = this.formValidate.beginDate;
          reqParams.supportFirstTransBonusPoints = this.formValidate.supportFirstTransBonusPointsArray && this.formValidate.supportFirstTransBonusPointsArray.length > 0 ? this.formValidate.supportFirstTransBonusPointsArray[0] : "0";
          reqParams.supportBirthdayBonusPoints = this.formValidate.supportBirthdayBonusPointsArray && this.formValidate.supportBirthdayBonusPointsArray.length > 0 ? this.formValidate.supportBirthdayBonusPointsArray[0] : "0";
          reqParams.isBlackEarnPoints = this.formValidate.blacklist && this.formValidate.blacklist.length > 0 ? this.formValidate.blacklist[0] : "0";
          reqParams.status = this.formValidate.status-1;
          savebasicrule(reqParams).then(res => {
              if (res.data.code == 200) {
                this.$Message.success("保存成功!");
                this.pointsRuleBasic();
              }
            })
            .catch(error => {
              this.$Message.error("保存失败!");
            });
        }
      });
    },
    fetchLeveltList() {
      fetchLeveltList().then(res => {
        if (res.data.code == 200) {
          if (res.data.data) {
            this.leveltList = res.data.data;
          }
        }
      }).catch(error => {
        this.$Message.error("请求会员等级失败!");
      });
    },
    showChannel() {
      this.flag = true;
    },
    hideChannel() {
      this.flag = false;
    },

    hideeditChannel(){
      this.editflag = 0;
    },
    showeditflag(){
      this.editflag = 1;
    },
    showeditLevel() {
      this.editlevelflag = 1;
    },
    hideeditLevel() {
      this.editlevelflag = 0;
    },
    showeditGood() {
      this.editgoodflag = 1;
    },
    hideeditGood() {
      this.editgoodflag = 0;
    },

    showLevel() {
      this.levelflag = true;
    },
    hideLevel() {
      this.levelflag = false;
    },
    showGood() {
      this.goodflag = true;
    },
    hideGood() {
      this.goodflag = false;
    },
    ruleChannelList() {  // 请求渠道
      fetchChannelList().then(res => {
        if (res.data.code == 200) {
            this.channel_id = res.data.data;
        }
      }).catch(error => {
          this.TableLoading = false;
          this.$Message.error("查询失败!");
      });
    },

    /** 请求促销积分表格 */
    Fetchsalesrule() {
      this.TableLoading = true;
      var reqParams = {
        rulename: this.formItem.rulename,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      fetchsalesrule(reqParams).then(res => {
          this.TableLoading = false;
          if (res.data.code == 200) {
            this.listData = res.data.result.records;
            this.pageNum = res.data.result.page;
            this.pageSize = res.data.result.size;
            this.total = res.data.result.total;
          } else {
            this.$Message.error(res.data.msg);
          }
        })
        .catch(error => {
          this.TableLoading = false;
          this.$Message.error("查询失败!");
        });
    },
    openModal() {
      this.addMal = true;
      this.productList = [];
    },

    showModel(){
      this.modal2 = true;
      this.pageNumpro = 1;
      this.Fetchproductlist();
    },

    /** 促销积分获取规则 */
    /** 格式化时间 */
    changeDate(value) {
      var dateee = new Date(value).toJSON();
      var date = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, " ").replace(/\.[\d]{3}Z/, "");
      return date;
    },
    /** 促销选择商品Modal搜索 */
    querylist() {
      this.pageNumpro = 1;
      this.Fetchproductlist();
    },
    /** 选择商品获取商品 */
    chooseInfo(obj) {
        // this.productList = obj;
        let productlists = [];
        obj.forEach(item=>{
          productlists.push({productId:item.id});
            this.formItem.productList = productlists;
            this.editrulelist.productList = productlists;
        });
    },
    splitchannel(){  // 拼接渠道
      let channellist = this.formItem.channelIds;
      for(var i = 0; i < channellist.length;i++){
        this.formItem.channelIds.join(',')
      }
    },
    splitmember(){ // 拼接会员等级
      let memberlist = this.formItem.levelIds;
      for(var i = 0; i < memberlist.length;i++){
        this.formItem.levelIds.join(',')
      }
    },
    chooseInforeduce(obj){
      this.productList = obj;
      this.formItem.productId = JSON.parse(this.formItem.productId);
    },
    addremove(index){
      this.productList.splice(index, 1);
    },
    chooseProductModel(){
      this.modal2 = true;
      this.Fetchproductlist();
    },
    Addgrade(name){
          if (this.formItem.code == "") {
              this.$Message.error("请输入积分规则编码!");
              return;
          }
          if (this.formItem.name == "") {
              this.$Message.error("请输入规则名称!");
              return;
          }
          if (this.formItem.beginDate == "") {
              this.$Message.error("请选择开始时间!");
              return;
          }
          if (this.formItem.endDate == "") {
              this.$Message.error("请选择结束时间!");
              return;
          }
          if (this.formItem.beginDate > this.formItem.endDate) {
              this.$Message.error("开始时间不能晚于结束时间,请重新选择!");
              return;
          }
          if ( this.formItem.needLimitChannel == '') {
              this.$Message.error("请选择渠道!");
              return;
          }
          if (this.formItem.levelIds == "") {
              this.$Message.error("请选择会员等级!");
              return;
          }
          if (this.formItem.productList == "") {
              this.$Message.error("请选择商品!");
              return;
          }
          if (this.formItem.pointsRewardType == '1' && (this.formItem.points == "" || this.formItem.pointsRadio % 1 != 0) ) {
              this.$Message.error("请输入整数类型积分");
              return;
          }
          if (this.formItem.pointsRewardType == '0' && (this.formItem.pointsRadio == '' ||  this.formItem.pointsRadio % 1 != 0)) {
              this.$Message.error("请选择赠送积分倍数!");
              return;
          }
          if (this.formItem.status == "") {
              this.$Message.error("请选择启用状态!");
              return;
          }
          var reqParams = this.formItem;
          reqParams.channelIds = this.formItem.channelIds.join(',');
          reqParams.levelIds = this.formItem.levelIds.join(',');
          addIntegralrule(reqParams).then((res)=>{
            if(res.data.code == 200){
              this.$Message.success("添加成功!");
              this.addMal = false;
              this.getruleTransList();
            }
          }).catch(error => {
              this.$Message.error("添加失败!");
          });
    },

    Editgrade(name) {
      // 编辑
      this.$refs[name].validate(valid => {
        if (valid) {
          var date1, date2;
          if (null != this.formItem.begintime)
            date1 = Date.parse(this.formItem.begintime);
          if (null != this.formValidate.endtime)
            date2 = Date.parse(this.formItem.endtime);
          if (date1 > date2) {
            this.$Message.error("开始时间开始时间不能晚于结束时间");
            return;
          }
          var reqParams = this.formItem;
          editgrade(reqParams)
            .then(res => {
              if (res.data.code == 200) {
                this.$Message.success("保存成功!");
                this.getruleTransList();
                setTimeout(() => {
                  this.addMal = false;
                }, 1500);
              }
            }).catch(error => {
              this.$Message.error("保存失败!");
            });
        }
      });
    },

    Fetchproductlist() {   // 请求商品列表
      this.TableLoading = true;
      var reqParams = {
        pageNum: this.pageNumpro,
        pageSize: this.pageSizepro,
        codeOrName: this.codeOrName,
      };
      fetchProductList(reqParams).then(res => {
          this.TableLoading = false;
          if (res.data.code == 200) {
            this.productData = res.data.result.productPage.records;
            this.productData.forEach(product =>{
              this.editrulelist.productList.forEach(item =>{
                if (product.id == item.productId){
                  product._checked = true;
                }
              })
            })
            this.pageNumpro = res.data.result.productPage.pages;
            this.pageSizepro = res.data.result.productPage.size;
            this.totalpro = res.data.result.productPage.total;
          }
        })
        .catch(error => {
          this.$Message.error("查询失败!");
        });
    },

    editruleOpen(index) {
      this.modal4 = true;
      this.editrulelist = this.ruleTransList[index];
      this.editflag = this.ruleTransList[index].needLimitChannel;
      this.productList = this.ruleTransList[index].productList;
      this.editrulelist.channelIds = this.ruleTransList[index].channelIds.split(',');
      let products = this.ruleTransList[index].productList;
      let productlists = [];
      products.forEach(item=>{
        productlists.push({productId:item.id});
        this.editrulelist.productList = productlists;
      })
      this.editlevelflag = this.ruleTransList[index].needLimitLevel;
      this.editrulelist.levelIds = this.ruleTransList[index].levelIds.split(',');
      this.editgoodflag = this.ruleTransList[index].needLimitProduct;
      this.editrulelist.id = this.ruleTransList[index].id;
    },

    //更改促销积分规则状态
    changeStatus(params, status) {
      var my = this;
      this.$Modal.confirm({
        title: "更改状态",
        content: `是否确认更改状态`,
        onOk: function() {
          var reqParams = {
            id: params.id,
            status: status
          };
          fetchintegralStatus(reqParams).then(res => {
            if (res.data.code == 200) {
              my.getruleTransList();
             if (status == 1) {
                this.$Message.info("启用成功！");
              } else if (status == 0) {
                this.$Message.info("停用成功！");
              }
            } else {
              if (status == 1) {
                this.$Message.info("启用失败：" + res.data.msg);
              } else if (status == 0) {
                this.$Message.info("停用失败：" + res.data.msg);
              }
            }
          });
        }
      });
    },

    //删除促销积分规则
    remove(params) {
      var my = this;
      this.$Modal.confirm({
        title: "删除确认",
        content: `是否确认删除改积分规则？`,
        onOk: function() {
          var reqParams = {
            id: params.id
          };
          fetchintegralDel(reqParams).then(res => {
              if (res.data.code == 200) {
                this.$Message.info("删除成功！");
                my.getruleTransList();
              }
            })
            .catch(error => {
              this.$Message.error("保存失败!");
            });
        }
      });
    },

    EditIntegral(params){
      if (this.editrulelist.code == "") {
            this.$Message.error("请输入积分规则编码!");
            return;
        }
        if (this.editrulelist.name == "") {
            this.$Message.error("请输入积分规则名称!");
            return;
        }
        if (this.editrulelist.beginDate == "") {
            this.$Message.error("请选择开始时间!");
            return;
        }
        if (this.editrulelist.endDate == "") {
            this.$Message.error("请选择结束时间!");
            return;
        }
        if (this.editrulelist.beginDate > this.editrulelist.endDate) {
            this.$Message.error("开始时间不能晚于结束时间,请重新选择!");
            return;
        }
        if (this.editrulelist.needLimitChannel == "1" && this.editrulelist.channelIds.length == 0) {
            this.$Message.error("请选择渠道!");
            return;
        }
        if (this.editrulelist.needLimitLevel == "1" && this.editrulelist.levelIds.length == 0) {
            this.$Message.error("请选择等级!");
            return;
        }
        if (this.editrulelist.needLimitProduct == "1" && this.productList.length == 0) {
            this.$Message.error("请选择商品类型!");
            return;
        }
        if (this.editrulelist.pointsRewardType == 0 && this.editrulelist.pointsRadio == "") {
            this.$Message.error("请输入赠送积分倍数!");
            return;
        }
        if (this.editrulelist.pointsRewardType == 1 && this.editrulelist.points == "") {
            this.$Message.error("请输入赠送积分数量!");
            return;
        }
        var reqParams = this.editrulelist;
        reqParams.channelIds = this.editrulelist.channelIds.join(',');
        reqParams.levelIds = this.editrulelist.levelIds.join(',');
        addIntegralrule(reqParams).then((res)=>{
            if(res.data.code == 200){
                this.$Message.success('修改成功！');
                this.getruleTransList();
                this.modal4 = false;
            }
        }).catch((error)=>{
            this.TableLoading = false;
            this.$Message.error("修改失败!");
      })
    },
    /** 促销积分规则分页切换 */
    pageable(current) {
      this.pageNumsale = current;
      this.getruleTransList();
    },
    ruleTranschangePageSize(pageSizesale) {
      this.pageNumsale = 1;
      this.pageSizesale = pageSizesale;
      this.getruleTransList();
    },

    /** 促销积分选择商品Modal分页 */
    pageSizeproduct(current){
      this.pageNumpro = current;
      this.Fetchproductlist();
    },
    pagechangeSize(pageSizepro){
      this.pageNumpro = 1;
      this.pageSizepro = pageSizepro;
      this.Fetchproductlist();
    },


    /** 互动积分规则表格分页相关跳转 */
    pageable2(current) {
      this.pageNum2 = current;
      this.behaviourTypePage();
    },
    
    changegroupPageSize2(pageSize) {
      (this.pageNum2 = 1), (this.pageSize2 = pageSize);
      this.behaviourTypePage();
    },

    goElevatorPage(pageId) {
      var evtObj;
      var thisPage = document.getElementById(pageId);
      var elevatorDiv = thisPage.getElementsByClassName(
        "ivu-page-options-elevator"
      );
      if (elevatorDiv && elevatorDiv.length > 0) {
        var pageInput = elevatorDiv[0].getElementsByTagName("input")[0];
        if (window.KeyEvent) {
          evtObj = document.createEvent("KeyEvents");
          evtObj.initKeyEvent("keyup",true,true,window,true,false,false,false,13,0);
        } else {
          evtObj = document.createEvent("UIEvents");
          evtObj.initUIEvent("keyup", true, true, window, 1);
          delete evtObj.keyCode;
          if (typeof evtObj.keyCode === "undefined") {
            Object.defineProperty(evtObj, "keyCode", { value: 13 });
          } else {
            evtObj.key = String.fromCharCode(13);
          }
        }
        pageInput.dispatchEvent(evtObj);
      }
    },

    skip(params) {
      this.$router.push({ path: "/loyalty/editIntegral/" + params });
    },

    getruleTransList() {
      var reqParams = {
        pageNum: this.pageNumsale,
        pageSize: this.pageSizesale,
        codeOrName: this.formItem.rulename
      };
      getRuleTrans(reqParams).then(res => {
        if (res.data.code == 200) {
          this.ruleTransList = res.data.result.records;
          this.pageNumsale = res.data.result.current;
          this.pageSizesale = res.data.result.size;
          this.totalsale = res.data.result.total;
        } else if (res.data.code == 401) {
          this.$Message.error(res.data.msg);
        } else {
          this.$Message.error("操作失败");
        }
      });
    },

    //获取基础积分规则
    pointsRuleBasic() {
      this.TableLoading = true;
      pointsRuleBasic().then(res => {
          this.TableLoading = false;
          if (res.data.code == 200) {
            this.formValidate = res.data.data;
            if ( res.data.data.supportFirstTransBonusPoints && res.data.data.supportFirstTransBonusPoints === 1) {
              this.disabled1 = false;
              this.formValidate.supportFirstTransBonusPointsArray = ["1"];
            }
            if ( res.data.data.supportBirthdayBonusPoints && res.data.data.supportBirthdayBonusPoints === 1) {
              this.disabled2 = false;
              this.formValidate.supportBirthdayBonusPointsArray = ["1"];
            }
            if ( res.data.data.pointsRoundType) {
              this.formValidate.pointsRoundType = res.data.data.pointsRoundType.toString();
            }
            if ( res.data.data.isBlackEarnPoints && res.data.data.isBlackEarnPoints === 1) {
              this.formValidate.blacklist = ["1"];
            }
            if (res.data.data.status != null) {
              this.formValidate.status = (res.data.data.status+1).toString();
            }
            if (res.data.data.amount) {
              this.formValidate.amount = res.data.data.amount.toString();
            }
            if (res.data.data.points) {
              this.formValidate.points = res.data.data.points.toString();
            }
            if ( res.data.data.needLimitMaxPoints && res.data.data.needLimitMaxPoints === 1) {
              this.formValidate.needLimitMaxPointsArray = ["1"];
              this.disabled3 = false;
            }
            if (res.data.data.maxPointsRadio) {
              this.formValidate.maxPointsRadio = res.data.data.maxPointsRadio.toString();
            }
            if (res.data.data.firstTransPointsRadio) {
              this.formValidate.firstTransPointsRadio = res.data.data.firstTransPointsRadio.toString();
            }
          }
        })
        .catch(error => {
          this.$Message.error("查询失败!");
        });


    },

    //互动积分规则类型列表
    behaviourTypePage() {
      //this.TableLoading = true;
      var req = {
        pageSize: this.pageSize2,
        pageNum: this.pageNum2
      };
      behaviourTypePage(req).then(res => {
          this.TableLoading = false;
          if (res.data.code == 0) {
            this.pointsRuleBehaviourList = res.data.result.behaviourTypePage.records;
              this.pageNum2 = res.data.result.behaviourTypePage.current;
              this.pageSize2 = res.data.result.behaviourTypePage.size;
              this.total2 = res.data.result.behaviourTypePage.total;
          } else {
            this.$Message.error(res.data.msg);
          }
        })
        .catch(error => {
          this.TableLoading = false;
          this.$Message.error("查询失败!");
        });
    },

    FetchData() {
      this.FetchlevelRuleList();
      //this.Fetchsalesrule();
      //this.Fetchproductlist();
      this.pointsRuleBasic();
      this.behaviourTypePage();
      this.getruleTransList();
      this.ruleChannelList();
      this.fetchLeveltList();
    }
  },
  computed: {
    ...mapState(["levelRulelist"]),
    productstyle() {
      return {
        display: "inline-block",
        height: "30px",
        width: "100%",
        paddingLeft: "3vw",
        borderBottom: "1px solid lightgray"
      };
    },
    productliststyle() {
      return {
        width: "100%",
        height: "15vh",
        marginTop: "2vh",
        overflowY: "scroll"
      };
    }
  },
  mounted() {
    this.FetchData();
  }
};
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.IntegralRule_container {
  background-color: #fff;
  .nav {
    font-size: 1.1rem;
    line-height: 30px;
    padding: 0px 0px 0px 10px;
  }
  .title {
    font-size: 1.1rem;
    font-weight: bolder;
    @include Integral_title_global;
  }
}
</style>
